<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>修改用户角色</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${global_templets_skin}/systemstyle/layui/css/layui.css" media="all">
    <link href="${global_templets_skin}/systemstyle/layui/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
    <script type="text/javascript" src="${global_templets_skin}/common/js/jquery.min.js"></script>
    <script type="text/javascript" src="${global_templets_skin}/systemstyle/layui/ztree/jquery.ztree.core-3.5.min.js"></script>
    <script type="text/javascript" src="${global_templets_skin}/systemstyle/layui/ztree/jquery.ztree.excheck-3.5.min.js"></script>
    <script type="text/javascript" src="${global_templets_skin}/systemstyle/layui/ztree/jquery.ztree.exhide.js"></script>
</head>
<body>

<div class="layui-card-body">
    <form class="layui-form" action="" lay-filter="component-form-element">
        <div class="layui-form-item">
            <label class="layui-form-label">角色名称</label>
            <div class="layui-input-block">
                <input type="text" name="roleName" value="${role.roleName!}" lay-verify="required" placeholder="请输入角色名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">权限字符</label>
            <div class="layui-input-block">
                <input type="text" name="roleKey" value="${role.roleKey!}" lay-verify="required" placeholder="用户权限控制的权限字符" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-block">
                <input type="text" name="sortOrder" value="${role.sortOrder!}" lay-verify="required" placeholder="输入排序数字，越得越向后排" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <textarea name="remark" placeholder="角色说明" class="layui-textarea">${role.remark!}</textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色状态</label>
            <div class="layui-input-block">
                <input type="radio" name="status" value="0" title="禁用"<#if !role.status> checked="checked"</#if>>
                <input type="radio" name="status" value="1" title="启用"<#if role.status> checked="checked"</#if>>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">菜单权限</label>
            <div class="layui-input-block">
                <input type="hidden" name="treeId" id="treeId" value="">
                <ul id="typeTree" class="ztree"></ul>
            </div>
        </div>
        <div class="layui-form-item layui-hide">
            <input type="hidden" name="id" id="id" value="${role.id!}">
            <input type="button" lay-submit lay-filter="LAY-user-front-submit" id="LAY-user-front-submit" value="确认">
        </div>
    </form>
</div>
<script src="${global_templets_skin}/systemstyle/layui/layui.js"></script>
<script>
    layui.config({
        base: '${global_templets_skin}/systemstyle/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form'], function(){
        var $ = layui.jquery
            ,admin = layui.admin
            ,element = layui.element
            ,form = layui.form;

        var setting = {
            view: {
                showIcon: true
            },
            check: { //表示tree的节点在点击时的相关设置
                enable: true, //是否显示radio/checkbox
                autoCheckTrigger: false,
                chkStyle: "checkbox",//值为checkbox或者radio表示
                chkboxType: {"Y": "ps", "N": "s"}
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",//节点id名
                    pIdKey: "pId",//父节点id名
                    rootPId: 0//默认根节点为0
                }
            },
            callback:{
                onCheck:onCheck
            }
        };

        $.ajax({
            url : '/admin/menu/role_menu_tree_data.do?roleId=${role.id!}',
            type : 'get',
            dataType : 'json',
            timeout : 1000,
            error : function(){
                alert("网络延时，请重试.");
            },
            success : function(res){
                treeNodes = res;
                let treeObj = $.fn.zTree.init($("#typeTree"), setting, treeNodes);
                treeObj.expandAll(true);
            }
        });

        function onCheck(e,treeId,treeNode){
            var treeObj=$.fn.zTree.getZTreeObj("typeTree"),
                childNodes=treeObj.getCheckedNodes(true);
            var nodes = new Array();
            for(i = 0; i < childNodes.length; i++) {
                nodes[i] = childNodes[i].id;
            }
            $('#treeId').val(nodes.join(","));
        }


        form.render(null, 'component-form-element');
        element.render('breadcrumb', 'breadcrumb');

        form.on('submit(component-form-element)', function(data){
            layer.msg(JSON.stringify(data.field));
            return false;
        });
    });
</script>
</body>
</html>